<template lang="html">
  <div id="communityDetail-wrap">
    <!-- 轮播图 -->
    <section class="communityDetail-banner">
      <swiper :list="images" dots-position="center" height="280px" :show-desc-mask="false" auto></swiper>
      <section class="figcaption pad-side-15">
        <div class="communityDetail-title-wrap">
          <h3 class="communityDetail-title">{{name}}</h3>
          <p class="communityDetail-address">{{addr}}</p>
        </div>
      </section>
    </section>
    <!-- 公寓信息 -->
    <section class="housing-section pad-side-15" v-if="price">
      <p class="housing-title">详情</p>
      <div class="communityDetail-price">
        <p>均价：<span>{{price}}元 / 月</span></p>
        <!-- <p>月环比：<span></span></p> -->
      </div>
      <p class="communityDetail-tag">
        <!-- <span>采光好</span>
        <span>交通便利</span>
        <span>环境优美</span> -->
      </p>
    </section>
    <section class="housing-section">
      <p class="housing-title">介绍</p>
      <!-- 房源信息 -->
      <div class="housing-table">
        <!-- <p class="housing-item width-100">住宅：<span></span></p> -->
        <p class="housing-item width-100" v-if="Expl_Com">开发商：<span>{{Expl_Com}}</span></p>
        <!-- <p class="housing-item width-100">可售房源：<span></span></p> -->
        <!-- <p class="housing-item">开盘时间：<span></span></p> -->
        <!-- <p class="housing-item">入住时间：<span></span></p> -->
        <p class="housing-item" v-if="B_Sqar">建筑面积：<span>{{B_Sqar}}万m²</span></p>
        <p class="housing-item" v-if="B_Sqar">装修情况：<span>{{B_Sqar}}</span></p>
        <p class="housing-item" v-if="L_Sqar">占地面积：<span>{{L_Sqar}}万m²</span></p>
        <p class="housing-item" v-if="block">所属板块：<span>{{block}}</span></p>
        <p class="housing-item" v-if="V_Rate">容积率：<span>{{V_Rate}}</span></p>
        <p class="housing-item" v-if="G_Rate">绿化率：<span>{{G_Rate}}</span></p>
        <p class="housing-item width-100" v-if="B_Type">建筑形式：<span>{{B_Type}}</span></p>
        <p class="housing-item width-100" v-if="Type">物业类型：<span>{{Type}}</span></p>
      </div>
    </section>

    <section class="housing-section" style="border:none;" v-if="subDev">
      <p class="housing-title">配套信息</p>
      <p class="housing-intro">{{subDev}}</p>
    </section>

  </div>
</template>

<script>
import { Swiper, Cell } from 'vux'
import HouseMap from './houseMap'
export default {
  components: {
    Swiper,
    Cell,
    HouseMap
  },
  data () {
    return {
      name: '', // 小区名字
      Expl_Com: '', // 开发商
      Type: '', // 物业类型类型
      block: '', // 板块
      B_Type: '', // 建筑形式
      B_Sqar: '', // 建筑面积
      L_Sqar: '', // 占地面积
      G_Rate: '', // 绿化率
      V_Rate: '', // 容积率
      addr: '', // 小区地址
      subDev: '', // 配套信息
      price: '', // 均价
      images: [] // 轮播图数据
    }
  },
  methods: {},
  created () {
    let key = this.$route.query.key
    this.$axiosGeting(`${this.$api.getDataWithBuildsName}?key=${key}`).then(res => {
      if (res.code === '0000') {
        let build = res.data.buildsInfo.build
        let pictureInfo = res.data.pictureInfo && res.data.pictureInfo.build
        let priceInfo = res.data.avgRentPriceInfo.build

        this.B_Type = res.data.buildInfo.build.B_Type || res.data.buildInfo.build[0].B_Type

        this.name = build.Name
        this.addr = build.Addr
        this.Type = build.Type
        this.Expl_Com = build.Expl_Com
        this.B_Sqar = Number(build.B_Sqar).toFixed(2)
        this.L_Sqar = Number(build.L_Sqar).toFixed(2)
        this.block = build.block
        this.G_Rate = build.G_Rate
        this.V_Rate = build.V_Rate
        this.subDev = build.Sub_Dev
        this.price = priceInfo.price ? priceInfo.price : priceInfo[1].price

        if (pictureInfo) {
          let images = []
          pictureInfo.map(item => {
            let image = {
              url: 'javascript:;',
              img: item.f_path
            }
            images.push(image)
          })

          this.images = images
        }

        console.log(res)
      } else {
        this.$vux.toast.text(res.msg)
      }
    })
  }
}
</script>

<style lang="less" scoped>
  @import "../../styles/baseVar.less";
  #communityDetail-wrap{
    background: #f4f4f4;
    .icon{
      display: inline-block;
    }
    .pad-side-15{
      padding: 0 15px;
    }
    .communityDetail-banner{
      background: #fff;
    }
    .housing-section{
      padding: 15px;
      background: #fff;
      // margin-bottom: 6px
      border-bottom: 1px solid #f4f4f4;
      &:last-of-type{
        margin-bottom: 0;
      }
    }
    .figcaption{
      padding-top: 10px;
      padding-bottom: 10px;
      display: flex;
      border-bottom: 1px solid #f4f4f4;
      .communityDetail-title-wrap{
        .communityDetail-title{
          width: 12.50rem; /* 500/40 */
          font-size: 19px; /* 38/40 */
          color: #585858;
          font-weight: normal;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          // white-space: nowrap;
          overflow: hidden;
        }
        .communityDetail-address{
          font-size: 14px;
          color: #989898;
        }
      }
      .communityDetail-btns{
        display: flex;
        justify-content: flex-end;
        flex: 1;
        .communityDetail-btn{
          // margin-left: 18px; /* 36/40 */
          i{
            display: inline-block;
            width: 20px;
            height: 20px;
          }
          img{
            width: 18px; /* 36/40 */
            vertical-align: initial;
          }
        }
        .attention-btn img{
          width: 20px;
        }
      }
    }
    .communityDetail-price{
      display: flex;
      p{
        flex: 1;
        font-size: 14px;
        color: #686868;
      }
      span{
        font-size: 20px;
        color:#ff3c00;
      }
    }
    .communityDetail-tag{
      span{
        display: inline-block;
        min-width: 50px;
        padding: 0 5px;
        text-align: center;
        font-size: 10px; /* 20/40 */
        line-height: 18px;
        border-radius: 4px;
        color: @badge-color;
        border: 1px solid @badge-color;
        box-sizing: border-box;
      }
      span+span{
        margin-left: 7px; /* 10/40 */
      }
    }
    .communityDetail-infos{
      display: flex;
      padding: 12px 0; /* 25/40 */
      margin-bottom: 6px;
      font-size: @font-size-13; /* 26/40 */
      line-height: 1.5;
      text-align: center;
      color: #777;
      background: #fff;
      .info-cell{
        flex: 1;
        &:first-of-type{
          border-right: 1px solid #f4f4f4;
        }
      }
    }
    .housing-title{
      padding-left: 12px;
      margin-left: -15px;
      line-height: 1.25;
      font-size: 14px;
      margin-bottom: 12px;
      color: #585858;
      border-left: 3px solid #ff9600;
    }
    .housing-table{
      display: flex;
      flex-wrap: wrap;
      margin-top: 5px; /* 5/20 */
      font-size: 14px; /* 14/20 */
      line-height: 1.5;
      color: #777;
      .housing-item{
        width: 50%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        &.width-100{
          width: 100%;
        }
        &.width-33{
          width: 33%;
          padding-left: 18px;
          background: url('../../images/rent/true.png') left no-repeat;
          background-size: 12px 12px;
          box-sizing: border-box;
        }
      }
      .width-100{
        width: 100%;
      }
    }
    .houseMap{
      height: 180px;
      margin: 0 -15px;
    }
    .housing-intro{
      font-size: @font-size-13;
      color: #777;
    }
    .communityDetail-foot{
      height: 45px;
      background: #fff;
    }
    .foot-bar{
      display: flex;
      justify-content: space-between;
      text-align: center;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 45px;
      background: #fff;
      &:before{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        position: absolute;
        top: 0;
        background: #f4f4f4;
      }
      .foot-btn{
        flex: 1;
        color: @theme-button-cancel-font-color;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #777;
      }
      .sign-btn{
        background: #ff9600;
        color: #fff;
      }
    }
    .contact{
      position: fixed;
      right: 15px;
      bottom: 60px;
      width: 64px;
      height: 71px;
      background: url('../../images/rent/detail_lx.png') center no-repeat;
      background-size: cover;
    }
  }
</style>
<style lang="less">
  @import "../../styles/baseVar.less";

  #communityDetail-wrap{
    .communityDetail-address{
      color: @color-999999;
      background: #fff;
      .weui-cell__hd{
        line-height: 1;
      }
      .location{
        width: 12px; /* 24/40 */
        height: 15px; /* 30/40 */
        margin-right: 15px; /* 30/40 */
      }
      .weui-cells{
        margin-top: 0;
        font-size: @font-size-15; /* 30/40 */
      }
      .vux-label{
        width: 15rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .vux-indicator{
      display: flex;
    }
    .communityDetail-banner{
      .vux-icon-dot{
        background: rgba(0, 0, 0, .2);
        &.active{
          background: #fff;
        }
      }
    }
  }

</style>
